<template>
  <div class="echarts-table">
    <div class="header">
      <div class="color-black font-medium text-xs mb-2">
        {{ dataSource?.date }}
      </div>
      <div class="flex items-center mb-2">
        <div v-if="timeData == 11" class="color-black font-medium text-xs mr-5">
          总收入：
          <span class="font-medium"> {{ formatNumber(dataSource?.totalAmount, false) }}元 </span>
        </div>
        <div v-if="timeData == 12" class="color-black font-medium text-xs mr-5">
          已结算总额：
          <span class="font-medium"> {{ formatNumber(dataSource?.totalSettlementAmount, false) }}元 </span>
        </div>
      </div>
    </div>
    <div class="body w-full">
      <div class="w-full flex items-center item-cell">
        <div class="color-gray mr-1" style="width: 50%"> 渠道 </div>
        <div class="color-gray mr-2 text-center" style="width: 50%">{{ timeData == 11 ? '费用统计' : '已结算费用(元)' }}</div>
      </div>
      <div class="w-full flex items-center item-cell" v-for="item in dataSource?.infoList" :key="item.id">
        <div class="color-black mr-1" style="width: 50%">{{ item.name }}</div>
        <div class="mr-2 text-center" style="width: 50%">
          <span class="text-price">{{ formatNumber(item.totalAmount, false) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { formatNumber } from '@/utils'

  defineProps({
    dataSource: {
      type: Object,
      default: () => ({}),
    },
    timeData: {
      type: Number,
      default: 11,
    },
  })
</script>
<style lang="less" scoped>
  .echarts-table {
    min-width: 250px;
    padding: 8px 8px;
    background: linear-gradient(304.17deg, rgba(253, 254, 255, 0.6) -6.04%, rgba(244, 247, 252, 0.6) 85.2%);
    border-image: linear-gradient(337deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
  }

  .text-price {
    color: #178fff;
  }

  .color-black {
    color: #1d2129;
  }

  .item-cell {
    min-height: 32px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 6px 0px 20px 0px rgba(34, 87, 188, 0.1);
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 2px;

    &:last-child {
      margin-bottom: 0;
    }
  }
</style>
